<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>填报任务发布管理</title>
    <!-- 引入Element UI样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
            background-color: #f5f5f5;
        }

        .container {
            margin: 0;
            background-color: white;
            border-radius: 0;
            box-shadow: none;
            overflow: hidden;
            display: flex;
            height: 100vh;
            box-sizing: border-box;
        }

        .left-panel {
            width: 45%;
            background-color: white;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            min-width: 750px;
            flex-shrink: 0;
            height: 100vh;
        }

        .panel-divider {
            width: 6px;
            background-color: #e4e7ed;
            cursor: col-resize;
            position: relative;
            transition: background-color 0.2s;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .panel-divider:hover {
            background-color: #409eff;
        }

        .panel-divider.dragging {
            background-color: #409eff;
        }

        .panel-divider::after {
            content: '';
            width: 2px;
            height: 40px;
            background-color: #c0c4cc;
            border-radius: 1px;
        }

        .panel-divider:hover::after {
            background-color: white;
        }

        .panel-divider.dragging::after {
            background-color: white;
        }

        .right-panel {
            flex: 1;
            display: flex;
            flex-direction: column;
            min-width: 300px;
            overflow: hidden;
            height: 100vh;
        }

        /* 左侧任务列表样式 */
        .task-list-section {
            flex: 1;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        .task-list-header {
            padding: 15px 20px;
            border-bottom: 1px solid #e9ecef;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: #f8f9fa;
            flex-shrink: 0;
        }

        .task-list-header h3 {
            margin: 0;
            color: #2c3e50;
        }

        .search-filter-section {
            padding: 15px 20px;
            background-color: #f8f9fa;
            border-bottom: 1px solid #e9ecef;
            flex-shrink: 0;
        }

        .search-filter-section .el-form-item {
            margin-bottom: 0;
            margin-right: 16px;
        }

        .search-filter-section .el-form-item__label {
            color: #606266;
            font-weight: 500;
        }

        .task-detail-header {
            padding: 15px 20px;
            border-bottom: 1px solid #e9ecef;
            background-color: #f8f9fa;
            flex-shrink: 0;
        }

        .task-detail-header h3 {
            margin: 0;
            color: #2c3e50;
            font-size: 18px;
            font-weight: 600;
        }

        .task-list {
            flex: 1;
            overflow: hidden;
            padding: 0;
        }

        .task-name {
            font-weight: 500;
        }

        .selected-task {
            color: #409eff;
        }

        .deadline-overdue {
            color: #f56c6c;
        }

        .deadline-today {
            color: #e6a23c;
        }

        .deadline-future {
            color: #67c23a;
        }

        .tab-badge {
            margin-left: 8px;
        }

        .tab-badge .el-badge__content {
            background-color: #f56c6c;
        }

        /* 确保表格撑满页面并滚动条在底部 */
        .el-table {
            height: 100% !important;
        }

        .el-table__body-wrapper {
            overflow-y: auto !important;
            height: calc(100% - 40px) !important;
        }

        /* 确保表格容器撑满 */
        .table-container {
            height: 100%;
            display: flex;
            flex-direction: column;
        }

        .task-list {
            height: 100%;
            display: flex;
            flex-direction: column;
        }

        /* 选中行的样式 */
        .el-table .selected-row {
            background-color: #f0f9ff !important;
        }

        .el-table .selected-row:hover>td {
            background-color: #e6f7ff !important;
        }

        .el-table .selected-row td {
            background-color: #f0f9ff !important;
        }

        /* 表格行高样式 */
        .el-table .el-table__body td {
            padding: 4px 0;
        }

        .el-table .el-table__header th {
            padding: 8px 0;
        }

        .empty-task-list {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }

        /* 右侧任务详情样式 */
        .task-detail-section {
            flex: 1;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            height: 100%;
        }

        .no-task-selected {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 40px 20px;
        }

        /* 调整表格区域样式 */
        .table-section {
            flex: 1;
            display: flex;
            flex-direction: column;
            padding: 0;
            overflow: hidden;
        }

        /* 确保标签页内容撑满 */
        .el-tabs__content {
            height: 100%;
            overflow: hidden;
        }

        .el-tab-pane {
            height: 100%;
            overflow: hidden;
        }

        /* 状态样式 */
        .status-tag {
            text-align: center;
        }

        .division-header {
            background-color: #e6f7ff !important;
            font-weight: 600;
            color: #1890ff;
        }

        .bu-header {
            background-color: #f6ffed !important;
            font-weight: 500;
            color: #52c41a;
        }

        .user-header {
            background-color: #f8f9fa !important;
            font-weight: 500;
            color: #6c757d;
        }

        /* 表格内容区域 */
        .tab-content-area {
            flex: 1;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            padding: 0 20px 20px;
        }

        /* Iframe Modal Styles */
        .iframe-modal .el-dialog {
            margin: 20px auto;
        }

        .iframe-modal .el-dialog__body {
            padding: 0;
            height: 70vh;
        }

        .iframe-modal .el-dialog__header {
            padding: 15px 20px;
            background-color: #f8f9fa;
            border-bottom: 1px solid #e9ecef;
        }

        .iframe-modal .el-dialog__title {
            font-size: 16px;
            font-weight: 500;
            color: #2c3e50;
        }

        .audit-iframe {
            width: 100%;
            height: 100%;
            border: none;
            background-color: #fff;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="container">
            <!-- 左侧面板：任务列表 -->
            <div class="left-panel" ref="leftPanel">
                <div class="task-list-section">
                    <div class="task-list-header">
                        <h3>填报任务发布管理</h3>
                        <div>
                            <el-button type="info" size="small" icon="el-icon-check" @click="validatePublish">
                                发布校验
                            </el-button>
                            <el-button type="primary" size="small" icon="el-icon-plus" @click="createNewTask">
                                发布新任务
                            </el-button>
                        </div>
                    </div>

                    <!-- 搜索过滤区域 -->
                    <div class="search-filter-section">
                        <el-form :inline="true" size="small">
                            <el-form-item label="年份">
                                <el-select v-model="selectedYear" placeholder="选择年份" @change="filterTasks"
                                    style="width: 120px;">
                                    <el-option label="全部" value=""></el-option>
                                    <el-option label="2025" value="2025"></el-option>
                                    <el-option label="2024" value="2024"></el-option>
                                    <el-option label="2023" value="2023"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="状态">
                                <el-select v-model="statusFilter" placeholder="选择状态" @change="filterTasks"
                                    style="width: 120px;">
                                    <el-option label="全部" value=""></el-option>
                                    <el-option label="进行中" value="active"></el-option>
                                    <el-option label="已关闭" value="closed"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="filterTasks" icon="el-icon-search">搜索</el-button>
                                <el-button @click="resetFilter" icon="el-icon-refresh">重置</el-button>
                            </el-form-item>
                        </el-form>
                    </div>

                    <div class="task-list table-container" v-if="filteredTaskList.length > 0">
                        <el-table :data="filteredTaskList" style="width: 100%; height: 100%;"
                            :max-height="leftTableMaxHeight" @row-click="selectTask" :row-class-name="getRowClassName">
                            <el-table-column prop="taskName" label="任务名称" min-width="140" show-overflow-tooltip>
                                <template slot-scope="scope">
                                    <div class="task-name">
                                        <span
                                            :class="{ 'selected-task': selectedTask && selectedTask.id === scope.row.id }">
                                            {{ scope.row.taskName }}
                                        </span>
                                    </div>
                                </template>
                            </el-table-column>

                            <el-table-column prop="publishMonth" label="发布月份" min-width="100" align="center">
                                <template slot-scope="scope">
                                    {{ scope.row.publishMonth || '未设置' }}
                                </template>
                            </el-table-column>

                            <el-table-column prop="status" label="任务状态" min-width="80" align="center">
                                <template slot-scope="scope">
                                    <el-tag :type="getTaskStatusType(scope.row.status)" size="small">
                                        {{ getTaskStatusText(scope.row.status) }}
                                    </el-tag>
                                </template>
                            </el-table-column>

                            <el-table-column prop="publisher" label="发布人" min-width="100" align="center">
                                <template slot-scope="scope">
                                    {{ scope.row.publisher }}
                                </template>
                            </el-table-column>

                            <el-table-column prop="publishTime" label="发布时间" min-width="150" align="center">
                                <template slot-scope="scope">
                                    {{ formatDate(scope.row.publishTime) }}
                                </template>
                            </el-table-column>

                            <el-table-column prop="deadline" label="截止时间" min-width="150" align="center" sortable>
                                <template slot-scope="scope">
                                    <div :class="getDeadlineClass(scope.row)">
                                        {{ formatDate(scope.row.deadline) }}
                                    </div>
                                </template>
                            </el-table-column>

                            <el-table-column label="操作" min-width="100" align="center" fixed="right">
                                <template slot-scope="scope">
                                    <el-button v-if="scope.row.status !== 'closed'" type="text" size="small"
                                        style="color: #f56c6c;" @click.stop="closeTask(scope.row)">
                                        关闭
                                    </el-button>
                                    <el-button type="text" size="small" @click.stop="editTask(scope.row)">
                                        编辑
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>

                    <div v-else class="empty-task-list">
                        <el-empty :description="taskList.length > 0 ? '暂无符合条件的任务' : '暂无已发布任务'">
                        </el-empty>
                    </div>
                </div>
            </div>

            <!-- 分隔线 -->
            <div class="panel-divider" ref="divider" @mousedown="startResize"></div>

            <!-- 右侧面板：任务详情 -->
            <div class="right-panel" ref="rightPanel">

                <!-- 任务详情区域 -->
                <div class="task-detail-section" v-if="selectedTask">
                    <!-- 右侧header -->
                    <div class="task-detail-header">
                        <h3>{{ selectedTask.taskName }}</h3>
                        <div style="display: flex; gap: 15px; font-size: 14px; color: #606266; margin-top: 8px;">
                            <span>发布月份: {{ selectedTask.publishMonth }}</span>
                            <span>发布人: {{ selectedTask.publisher }}</span>
                            <span>截止时间: {{ formatDate(selectedTask.deadline) }}</span>
                        </div>
                    </div>

                    <!-- 标签页 -->
                    <div style="padding: 0 20px; margin-top: 15px; flex-shrink: 0;">
                        <el-tabs v-model="activeTab" @tab-click="handleTabClick">
                            <el-tab-pane name="pending">
                                <span slot="label">
                                    待审核
                                    <el-badge :value="pendingReviewCount" class="tab-badge"
                                        v-if="pendingReviewCount > 0"></el-badge>
                                </span>
                            </el-tab-pane>
                            <el-tab-pane name="unsubmitted">
                                <span slot="label">
                                    待提交
                                    <el-badge :value="pendingSubmissionCount" class="tab-badge"
                                        v-if="pendingSubmissionCount > 0"></el-badge>
                                </span>
                            </el-tab-pane>
                            <el-tab-pane name="approved">
                                <span slot="label">
                                    已通过
                                    <el-badge :value="approvedCount" class="tab-badge"
                                        v-if="approvedCount > 0"></el-badge>
                                </span>
                            </el-tab-pane>
                        </el-tabs>
                    </div>

                    <div class="tab-content-area">
                        <!-- 共用表格 -->
                        <el-table v-if="currentTableData.length > 0" :data="currentTableData" border
                            style="width: 100%; height: 100%;" :max-height="tableMaxHeight">
                            <el-table-column width="50" align="center" label="NO." type="index"></el-table-column>

                            <el-table-column prop="bu" label="BU" min-width="180" align="center" show-overflow-tooltip
                                sortable>
                                <template slot-scope="scope">
                                    <span class="bu-header">{{ scope.row.bu }}</span>
                                </template>
                            </el-table-column>

                            <el-table-column prop="responsible" label="责任人" min-width="100" align="center"
                                show-overflow-tooltip sortable>
                                <template slot-scope="scope">
                                    <span class="user-header">{{ scope.row.responsible }}</span>
                                </template>
                            </el-table-column>

                            <!-- 根据不同标签页显示不同的时间列 -->
                            <el-table-column v-if="activeTab === 'pending' || activeTab === 'approved'"
                                prop="submit_time" label="提交时间" min-width="140" align="center" show-overflow-tooltip>
                                <template slot-scope="scope">
                                    <span class="user-header">{{ formatDate(scope.row.submit_time) }}</span>
                                </template>
                            </el-table-column>

                            <el-table-column v-if="activeTab === 'unsubmitted'" prop="last_remind_time" label="最后提醒时间"
                                min-width="140" align="center" show-overflow-tooltip>
                                <template slot-scope="scope">
                                    <span class="user-header">{{ formatDate(scope.row.last_remind_time) || '未提醒'
                                        }}</span>
                                </template>
                            </el-table-column>

                            <el-table-column v-if="activeTab === 'approved'" prop="approve_time" label="通过时间"
                                min-width="140" align="center" show-overflow-tooltip>
                                <template slot-scope="scope">
                                    <span class="user-header">{{ formatDate(scope.row.approve_time) }}</span>
                                </template>
                            </el-table-column>

                            <el-table-column prop="state" label="状态" min-width="80" align="center"
                                show-overflow-tooltip>
                                <template slot-scope="scope">
                                    <div class="status-tag">
                                        <el-tag :type="getStatusType(scope.row.state)" size="small">
                                            {{ getStatusText(scope.row.state) }}
                                        </el-tag>
                                    </div>
                                </template>
                            </el-table-column>

                            <!-- 操作列仅在待提交标签页显示 -->
                            <el-table-column label="操作" min-width="100" align="center" fixed="right">
                                <template slot-scope="scope">
                                    <el-button v-if="activeTab === 'unsubmitted'" type="text" size="small"
                                        @click="remindUser(scope.row)">
                                        发送提醒
                                    </el-button>

                                    <el-button v-if="activeTab === 'pending'" type="text" size="small"
                                        @click="viewReport(scope.row)">
                                        前往审核
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>

                        <!-- 无数据时的空状态 -->
                        <div v-else style="text-align: center; padding: 40px;">
                            <el-empty :description="`暂无${getTabDescription(activeTab)}数据`">
                            </el-empty>
                        </div>
                    </div>
                </div>

                <!-- 无任务选择提示 -->
                <div class="no-task-selected" v-else>
                    <el-empty description="请选择左侧的填报任务查看详情">
                    </el-empty>
                </div>
            </div>
        </div>

        <!-- 创建任务对话框 -->
        <el-dialog title="发布新任务" :visible.sync="createTaskDialogVisible" width="500px" :close-on-click-modal="false">
            <el-form :model="newTaskForm" label-width="120px">
                <el-form-item label="任务名称" required>
                    <el-input v-model="newTaskForm.taskName" placeholder="请输入任务名称" style="width: 100%;"></el-input>
                </el-form-item>

                <el-form-item label="发布月份" required>
                    <el-date-picker v-model="newTaskForm.publishMonth" type="month" placeholder="选择发布月份"
                        format="yyyy-MM" value-format="yyyy-MM" style="width: 100%;">
                    </el-date-picker>
                </el-form-item>

                <el-form-item label="截止时间" required>
                    <el-date-picker v-model="newTaskForm.deadline" type="datetime" placeholder="选择截止时间"
                        format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" style="width: 100%;"
                        :picker-options="{
                            disabledDate(time) {
                                return time.getTime() < Date.now() - 8.64e7;
                            }
                        }">
                    </el-date-picker>
                </el-form-item>

                <el-form-item label="任务描述">
                    <el-input v-model="newTaskForm.description" type="textarea" :rows="3" placeholder="请输入任务描述（可选）"
                        style="width: 100%;"></el-input>
                </el-form-item>
            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button @click="createTaskDialogVisible = false">取消</el-button>
                <el-button type="info" @click="validatePublish">发布校验</el-button>
                <el-button type="primary" @click="submitCreateTask">确定发布</el-button>
            </div>
        </el-dialog>


        <!-- Iframe审核弹窗 -->
        <el-dialog :title="'具体审核页面'" :visible.sync="iframeModalVisible" width="95%" top="5vh" class="iframe-modal"
            :close-on-click-modal="false">

            <!-- Iframe内容 -->
            <iframe ref="auditIframe" :src="iframeSrc" class="audit-iframe" @load="handleIframeLoad">
            </iframe>

            <!-- Dialog Footer with Action Buttons -->
            <div slot="footer" class="dialog-footer">
                <el-button type="success" @click="approveFromDialog">通过</el-button>
                <el-button type="danger" @click="rejectFromDialog">拒绝</el-button>
                <el-button type="primary" @click="saveDataFromDialog">保存数据</el-button>
                <el-button @click="cancelDialog">取消</el-button>
            </div>
        </el-dialog>

    </div>

    <!-- 引入Vue.js -->
    <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
    <!-- 引入Element UI -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    allTableData: [],
                    activeTab: 'pending',
                    // 任务管理相关数据
                    taskList: [],
                    selectedTask: null,
                    // 过滤相关数据
                    selectedYear: '',
                    statusFilter: '',
                    filteredTaskList: [],
                    isResizing: false,
                    startX: 0,
                    startLeftWidth: 0,
                    // 窗口大小变化触发器
                    resizeTrigger: 0,
                    // 创建任务对话框相关数据
                    createTaskDialogVisible: false,
                    iframeModalVisible: false,
                    iframeSrc: '',
                    newTaskForm: {
                        taskName: '',
                        publishMonth: '',
                        deadline: '',
                        description: ''
                    }
                }
            },

            computed: {
                pendingReviewData() {
                    return this.allTableData.filter(row => row.state === 'pending');
                },

                approvedData() {
                    return this.allTableData.filter(row => row.state === 'approved');
                },

                unsubmittedData() {
                    return this.allTableData.filter(row => row.state === 'unsubmitted');
                },

                currentTableData() {
                    switch (this.activeTab) {
                        case 'pending':
                            return this.pendingReviewData;
                        case 'approved':
                            return this.approvedData;
                        case 'unsubmitted':
                            return this.unsubmittedData;
                        default:
                            return this.pendingReviewData;
                    }
                },

                pendingReviewCount() {
                    return this.pendingReviewData.length;
                },

                approvedCount() {
                    return this.approvedData.length;
                },

                pendingSubmissionCount() {
                    return this.unsubmittedData.length;
                },

                tableMaxHeight() {
                    // 计算表格最大高度：视窗高度 - 头部 - 标签页 - 其他元素
                    const headerHeight = 80; // 头部高度
                    const tabHeight = 60; // 标签页高度（包括padding和margin）
                    const paddingHeight = 40; // 内边距和其他元素高度
                    const height = window.innerHeight - headerHeight - tabHeight - paddingHeight;
                    // 使用resizeTrigger确保computed属性能够响应窗口大小变化
                    this.resizeTrigger; // 依赖resizeTrigger
                    return Math.max(height, 200); // 确保最小高度
                },

                leftTableMaxHeight() {
                    // 计算左侧表格最大高度：视窗高度 - 头部 - 搜索区域 - 其他元素
                    const headerHeight = 64; // 头部高度
                    const searchHeight = 64; // 搜索过滤区域高度（包括padding）
                    const paddingHeight = 20; // 内边距和其他元素高度
                    const height = window.innerHeight - headerHeight - searchHeight - paddingHeight;
                    // 使用resizeTrigger确保computed属性能够响应窗口大小变化
                    this.resizeTrigger; // 依赖resizeTrigger
                    return Math.max(height, 200); // 确保最小高度
                }
            },

            mounted() {
                this.loadTaskList();
                this.generateTableData();
                // 监听窗口大小变化，重新计算表格高度
                window.addEventListener('resize', this.handleWindowResize);
            },

            beforeDestroy() {
                window.removeEventListener('resize', this.handleWindowResize);
            },

            methods: {
                generateTableData() {
                    this.allTableData = [];

                    // 示例数据
                    const sampleData = [
                        {
                            "division": "PTI",
                            "bu": "CP",
                            "profit_center": "701106",
                            "responsible": "张三",
                            "state": "pending",
                            "submit_time": "2025-01-15 10:30:00"
                        },
                        {
                            "division": "PTI",
                            "bu": "CP",
                            "profit_center": "701107",
                            "responsible": "李四",
                            "state": "pending",
                            "submit_time": "2025-01-16 14:20:00"
                        },
                        {
                            "division": "PTI",
                            "bu": "IP",
                            "profit_center": "701108",
                            "responsible": "王五",
                            "state": "approved",
                            "submit_time": "2025-01-14 16:45:00",
                            "approve_time": "2025-01-15 09:30:00"
                        },
                        {
                            "division": "PTI",
                            "bu": "IP",
                            "profit_center": "701109",
                            "responsible": "赵六",
                            "state": "unsubmitted",
                            "last_remind_time": "2025-01-10 15:00:00"
                        },
                        {
                            "division": "Consumer",
                            "bu": "HC",
                            "profit_center": "701110",
                            "responsible": "钱七",
                            "state": "unsubmitted",
                            "last_remind_time": null
                        }
                    ];

                    this.allTableData = sampleData;
                },

                formatDate(dateString) {
                    if (!dateString) return '未知';
                    const date = new Date(dateString);
                    const year = date.getFullYear();
                    const month = String(date.getMonth() + 1).padStart(2, '0');
                    const day = String(date.getDate()).padStart(2, '0');
                    const hours = String(date.getHours()).padStart(2, '0');
                    const minutes = String(date.getMinutes()).padStart(2, '0');
                    return `${year}-${month}-${day} ${hours}:${minutes}`;
                },

                getStatusType(status) {
                    if (status === 'approved') {
                        return 'success';
                    } else if (status === 'rejected') {
                        return 'warning';
                    } else if (status === 'pending') {
                        return 'info';
                    } else if (status === 'unsubmitted') {
                        return 'info';
                    }
                    return 'info'; // 默认状态
                },

                getStatusText(status) {
                    if (status === 'approved') {
                        return '已通过';
                    } else if (status === 'rejected') {
                        return '已退回';
                    } else if (status === 'pending') {
                        return '待审核';
                    } else if (status === 'unsubmitted') {
                        return '待提交';
                    }
                    return '待审核'; // 默认状态
                },

                handleTabClick(tab) {
                    // 标签页切换时的处理逻辑
                    console.log('切换到标签页:', tab.name);
                },

                // 任务管理相关方法
                loadTaskList() {
                    // 从localStorage加载任务列表
                    const savedTaskList = localStorage.getItem('publishTaskList');
                    if (savedTaskList) {
                        this.taskList = JSON.parse(savedTaskList);
                    } else {
                        // 初始化示例任务数据
                        this.taskList = [
                            {
                                id: '1',
                                taskName: '2025年08月KPI填报',
                                publishMonth: '2025-01',
                                publisher: 'HR Admin',
                                publishTime: '2025-01-15T10:00:00',
                                deadline: '2025-02-15T23:59:59',
                                status: 'active',
                                description: '2025年第一季度KPI指标填报任务'
                            },
                            {
                                id: '2',
                                taskName: '2025年09月KPI填报',
                                publishMonth: '2024-12',
                                publisher: 'HR Admin',
                                publishTime: '2024-12-01T14:30:00',
                                deadline: '2024-12-31T23:59:59',
                                status: 'closed',
                                description: '2024年第四季度KPI指标填报任务'
                            }
                        ];
                        this.saveTaskList();
                    }
                    // 初始化过滤后的列表
                    this.filteredTaskList = [...this.taskList];
                },

                saveTaskList() {
                    localStorage.setItem('publishTaskList', JSON.stringify(this.taskList));
                },

                selectTask(task) {
                    this.selectedTask = task;
                    // 根据选中的任务加载相应的数据
                    this.loadTaskData(task);
                },

                loadTaskData(task) {
                    // 这里可以根据任务ID加载相应的填报数据
                    this.generateTableData();
                },

                createNewTask() {
                    // 显示任务创建对话框
                    this.createTaskDialogVisible = true;
                    this.newTaskForm = {
                        taskName: '',
                        publishMonth: '',
                        deadline: '',
                        description: ''
                    };
                },

                closeTask(task) {
                    this.$confirm(`确定要关闭任务"${task.taskName}"吗？关闭后任务将无法再编辑。`, '确认关闭', {
                        confirmButtonText: '确定关闭',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        task.status = 'closed';
                        this.saveTaskList();
                        this.$message.success('任务已关闭');
                    }).catch(() => {
                        this.$message.info('已取消关闭任务');
                    });
                },

                editTask(task) {
                    this.$message.info('编辑功能开发中...');
                },

                remindUser(row) {
                    this.$confirm(`确定要发送提醒给"${row.responsible}"吗？`, '发送提醒', {
                        confirmButtonText: '确定发送',
                        cancelButtonText: '取消',
                        type: 'info'
                    }).then(() => {
                        // 更新最后提醒时间
                        row.last_remind_time = new Date().toISOString();
                        this.$message.success(`提醒已发送给${row.responsible}`);
                    }).catch(() => {
                        this.$message.info('已取消发送提醒');
                    });
                },

                getTaskStatusType(status) {
                    const statusMap = {
                        'active': 'success',
                        'closed': 'primary'
                    };
                    return statusMap[status] || 'info';
                },

                getTaskStatusText(status) {
                    const statusMap = {
                        'active': '进行中',
                        'closed': '已关闭'
                    };
                    return statusMap[status] || '未知';
                },

                getDeadlineClass(row) {
                    if (!row.deadline) return '';

                    // 已关闭的任务不显示特殊颜色
                    if (row.status === 'closed') {
                        return '';
                    }

                    const today = new Date();
                    const taskDeadline = new Date(row.deadline);
                    const diffTime = taskDeadline.getTime() - today.getTime();
                    const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));

                    if (diffDays < 0) {
                        return 'deadline-overdue';
                    } else if (diffDays === 0) {
                        return 'deadline-today';
                    } else {
                        return 'deadline-future';
                    }
                },

                getTabDescription(tab) {
                    const tabMap = {
                        'pending': '待审核',
                        'approved': '已通过',
                        'unsubmitted': '待提交'
                    };
                    return tabMap[tab] || '未知';
                },

                filterTasks() {
                    let filtered = [...this.taskList];

                    // 按状态过滤
                    if (this.statusFilter) {
                        filtered = filtered.filter(task => task.status === this.statusFilter);
                    }

                    // 按年份过滤
                    if (this.selectedYear) {
                        filtered = filtered.filter(task => {
                            const taskYear = new Date(task.publishTime).getFullYear().toString();
                            return taskYear === this.selectedYear;
                        });
                    }

                    this.filteredTaskList = filtered;
                },

                resetFilter() {
                    this.selectedYear = '';
                    this.statusFilter = '';
                    this.filteredTaskList = [...this.taskList];
                },

                // 面板拖拽调整大小相关方法
                startResize(event) {
                    this.isResizing = true;
                    this.startX = event.clientX;
                    this.startLeftWidth = this.$refs.leftPanel.offsetWidth;

                    // 添加拖拽样式
                    this.$refs.divider.classList.add('dragging');

                    // 添加全局事件监听
                    document.addEventListener('mousemove', this.handleResize);
                    document.addEventListener('mouseup', this.stopResize);

                    // 防止文本选择
                    event.preventDefault();
                },

                handleResize(event) {
                    if (!this.isResizing) return;

                    const deltaX = event.clientX - this.startX;
                    const containerWidth = this.$refs.leftPanel.parentElement.offsetWidth;
                    const dividerWidth = this.$refs.divider.offsetWidth;

                    // 计算新的左侧面板宽度
                    let newLeftWidth = this.startLeftWidth + deltaX;

                    // 限制最小和最大宽度
                    const minWidth = 300;
                    const maxWidth = containerWidth - dividerWidth - minWidth;

                    newLeftWidth = Math.max(minWidth, Math.min(newLeftWidth, maxWidth));

                    // 设置左侧面板宽度
                    this.$refs.leftPanel.style.width = newLeftWidth + 'px';
                },

                stopResize() {
                    this.isResizing = false;

                    // 移除拖拽样式
                    if (this.$refs.divider) {
                        this.$refs.divider.classList.remove('dragging');
                    }

                    // 移除全局事件监听
                    document.removeEventListener('mousemove', this.handleResize);
                    document.removeEventListener('mouseup', this.stopResize);
                },

                // 获取行的CSS类名，用于选中效果
                getRowClassName({ row, rowIndex }) {
                    if (this.selectedTask && this.selectedTask.id === row.id) {
                        return 'selected-row';
                    }
                    return '';
                },

                handleWindowResize() {
                    // 窗口大小变化时触发重新计算
                    this.resizeTrigger++;

                    // 延迟执行以确保DOM更新完成
                    this.$nextTick(() => {
                        this.$forceUpdate();
                    });
                },

                submitCreateTask() {
                    if (!this.newTaskForm.taskName.trim()) {
                        this.$message.error('请输入任务名称');
                        return;
                    }

                    if (!this.newTaskForm.publishMonth) {
                        this.$message.error('请选择发布月份');
                        return;
                    }

                    if (!this.newTaskForm.deadline) {
                        this.$message.error('请选择截止时间');
                        return;
                    }

                    const publishTime = new Date();

                    const newTask = {
                        id: Date.now().toString(),
                        taskName: this.newTaskForm.taskName.trim(),
                        publishMonth: this.newTaskForm.publishMonth,
                        publisher: 'HR Admin',
                        publishTime: publishTime.toISOString(),
                        deadline: this.newTaskForm.deadline,
                        status: 'active',
                        description: this.newTaskForm.description || ''
                    };

                    this.taskList.unshift(newTask);
                    this.filteredTaskList = [...this.taskList];
                    this.saveTaskList();
                    this.selectTask(newTask);
                    this.createTaskDialogVisible = false;
                    this.$message.success('任务发布成功');
                },

                // 发布校验方法
                validatePublish() {
                    // 校验是否所有的人员都已设置套餐
                    // 方法实现为空，点击后校验通过
                    this.$message.success('校验通过');
                },


                viewReport(report) {
                    this.currentReportName = report.taskName;
                    this.iframeSrc = './multi-package-audit.html';
                    this.iframeLoading = true;
                    this.iframeError = false;
                    this.iframeModalVisible = true;

                    // setTimeout(() => {
                    //     this.$refs.auditIframe.src = this.iframeSrc
                    // }, 100)
                },

                handleIframeLoad() {
                    this.iframeLoading = false;
                    this.iframeError = false;
                },
                // Dialog footer button methods
                approveFromDialog() {
                    this.$confirm('确定要通过当前审核吗？', '审核通过', {
                        confirmButtonText: '确定通过',
                        cancelButtonText: '取消',
                        type: 'success'
                    }).then(() => {
                        // 向 iframe 发送通过指令
                        this.sendMessageToIframe({
                            type: 'APPROVE_AUDIT',
                            from: 'parent'
                        });
                        this.$message.success('审核通过指令已发送');
                    }).catch(() => {
                        this.$message.info('已取消审核');
                    });
                },

                rejectFromDialog() {
                    this.$prompt('请输入拒绝原因', '审核拒绝', {
                        confirmButtonText: '确定拒绝',
                        cancelButtonText: '取消',
                        inputValidator: (value) => {
                            if (!value || value.trim() === '') {
                                return '请输入拒绝原因';
                            }
                            return true;
                        },
                        inputErrorMessage: '拒绝原因不能为空'
                    }).then(({ value }) => {
                        // 向 iframe 发送拒绝指令
                        this.sendMessageToIframe({
                            type: 'REJECT_AUDIT',
                            reason: value,
                            from: 'parent'
                        });
                        this.$message.warning(`审核拒绝指令已发送，原因：${value}`);
                    }).catch(() => {
                        this.$message.info('已取消拒绝操作');
                    });
                },

                saveDataFromDialog() {
                    this.$confirm('确定要保存当前数据吗？', '保存数据', {
                        confirmButtonText: '确定保存',
                        cancelButtonText: '取消',
                        type: 'info'
                    }).then(() => {
                        // 向 iframe 发送保存指令
                        this.sendMessageToIframe({
                            type: 'SAVE_DATA',
                            from: 'parent'
                        });
                        this.$message.success('保存数据指令已发送');
                    }).catch(() => {
                        this.$message.info('已取消保存');
                    });
                },

                cancelDialog() {
                    this.$confirm('确定要关闭审核窗口吗？未保存的数据将丢失', '关闭窗口', {
                        confirmButtonText: '确定关闭',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.handleCloseIframeModal();
                    }).catch(() => {
                        this.$message.info('已取消关闭');
                    });
                }
            }
        });
    </script>
</body>

</html>